<template>
  <div class="production">
    <div class="searchtop">
      <form action="/" class="adds">
        <van-search show-action @search="onSearch" @cancel="onCancel" />
      </form>
    </div>
    <!--  -->
    <div class="grid">
      <ul>
        <li
          :class="[{ con: gridIndex == index }]"
          @click="catalogueFun(index)"
          v-for="(item, index) in tabs"
          :key="index"
        >
          {{ item }}
        </li>
      </ul>
    </div>
    <!-- 作品 -->
    <div class="productionleft" v-show="gridIndex == 0">
      <div class="works">
        <p>共<span>40</span>部作品</p>
      </div>
      <!-- 加载中 -->
      <div class="spinner" v-if="!lists">
        <van-loading type="spinner" size="30px" />
      </div>
      <!--  -->
      <div class="list" v-for="item in lists" :key="item.id">
        <ul>
          <router-link tag="li" :to="'/VideoDisplay?id=' + item.id">
            <div class="img">
              <img :src="item.cover" />
            </div>
            <div class="lists">
              <p>{{ item.title }}</p>
              <div class="two">
                <div class="amount">
                  播放量
                  <span>{{ item.count.count_view | playCountNum }} - </span>
                </div>
                <div class="like">
                  喜欢 <span>{{ item.count.count_like | playCountNum }}</span>
                </div>
              </div>
              <div class="names">
                <div class="imgs" v-if="item.author.userinfo.avatar">
                  <img :src="item.author.userinfo.avatar" alt="" />
                </div>
                <div class="name">
                  {{ item.author.userinfo.username }}
                </div>
              </div>
            </div>
          </router-link>
        </ul>
      </div>
    </div>
    <!-- 创作人 -->
    <div class="composer" v-show="gridIndex == 1">
      <div class="works">
        <p>
          共<span>{{ num }}</span
          >部作品
        </p>
      </div>
      <div class="spinner" v-if="!creators">
        <van-loading type="spinner" size="30px" />
      </div>
      <div class="list">
        <ul>
          <li v-for="item in creators" :key="item.id">
            <div class="img">
              <img :src="item.avatar" alt="" />
            </div>
            <div class="listrigth">
              <div class="left">
                <p>{{ item.username }}</p>
                <div class="bottom">
                  <span class="top">{{ item.occupation }}.</span>
                  <div>
                    粉丝 <span>{{ item.count.count_article }}</span>
                  </div>
                </div>
              </div>
              <div class="rigth">关注</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getresult, getcreators } from "../api/home";
export default {
  data() {
    return {
      num: "",
      lists: "",
      creators: "",
      tabs: ["作品", "创作人"],
      gridIndex: 0,
    };
  },
  methods: {
    onSearch() {
      console.log("输入值");
      this.$router.push("/SearchTwo");
    },
    onCancel() {
      //   Toast("取消");
      this.$router.push("/SearchFun");
    },
    getresultFun() {
      let kw = this.$route.query.kw;
      console.log(kw);
      getresult({ kw }).then((data) => {
        console.log(data, "搜索结果");
        this.lists = data.data.list;
        console.log(this.lists, "111");
      });
    },
    // 创作人
    getcreatorsFun() {
      getcreators().then((data) => {
        this.creators = data.data.list;
        this.num = data.data.page_size;
        console.log(this.creators, "创作人");
      });
    },
    //状态栏切换
    catalogueFun(index) {
      this.gridIndex = index;
    },
  },
  mounted() {
    this.getresultFun();
    this.getcreatorsFun();
  },
  //过滤器
  filters: {
    playCountNum(value) {
      //123 0000
      if (value < 10000) {
        return value;
      }
      let w = value > 10000 ? value / 10000 : value; //万计算
      let y = w > 10000 ? parseInt(w / 10000) + "亿" : parseInt(w) + "万"; //亿计算
      return y;
    },
  },
};
</script>

<style lang="less">
.production {
  width: 100%;
  position: relative;
  z-index: 100;
  background-color: #fff;
  .searchtop {
    width: 100%;
    height: 54px;
    display: flex;
    .adds {
      width: 100%;
    }
  }
  .grid {
    padding-bottom: 10px;
    margin-top: 10px;
    border-bottom: 2px solid #e4e4e4;
    ul {
      display: flex;
      justify-content: space-around;
      li {
        font-size: 13px;
        &.con {
          font-size: 13px;
          font-weight: 600;
          position: relative;
          &::after {
            position: absolute;
            left: 0px;
            bottom: -7px;
            content: "";
            display: inline-block;
            width: 25px;
            height: 4px;
            background: #e22f1c;
            border-radius: 3px;
          }
        }
      }
    }
  }
  // 作品
  .productionleft {
    width: 100%;
    .works {
      width: 100%;
      height: 40px;
      line-height: 40px;
      p {
        margin-left: 15px;
        font-size: 12px;
        color: #cccccc;
        span {
          color: red;
          font-weight: 400;
        }
      }
    }
    .spinner {
      position: fixed;
      top: 48%;
      left: 48%;
    }
    .list {
      width: 100%;
      ul {
        width: 100%;
        display: flex;
        flex-direction: column;
        li {
          display: flex;
          width: 100%;
          padding: 12px 0px 12px 0px;
          border-bottom: 1px solid #f3f3f3;
          .img {
            width: 125px;
            height: 70px;
            padding-left: 12px;
            img {
              width: 125px;
              height: 70px;
              border-radius: 5px;
            }
          }
          .lists {
            display: flex;
            flex-direction: column;
            margin-left: 10px;
            p {
              height: 33px;
              line-height: 33px;
              width: 100%;
              overflow: hidden;
              font-size: 13px;
              color: #1c1c1c;
            }
            .two {
              display: flex;
              height: 12px;
              font-size: 12px;
              line-height: 12px;
              color: #c0c0c0;
            }
            .names {
              color: #4a4a4a;
              font-size: 12px;
              height: 28px;
              line-height: 28px;
              display: flex;
              .imgs {
                margin-top: 5px;
                width: 16px;
                height: 16px;
                margin-right: 5px;
                img {
                  height: 16px;
                  width: 16px;
                  border-radius: 50%;
                }
              }
            }
          }
        }
      }
    }
  }
  //创作人
  .composer {
    width: 100%;
    .spinner {
      position: fixed;
      top: 48%;
      left: 48%;
    }
    .works {
      width: 100%;
      height: 40px;
      line-height: 40px;
      p {
        margin-left: 15px;
        font-size: 12px;
        color: #cccccc;
        span {
          color: red;
          font-weight: 400;
        }
      }
    }
    .list {
      width: 100%;
      ul {
        display: flex;
        flex-direction: column;
        li {
          // width: 100%;
          height: 40px;
          margin-left: 15px;
          padding: 12px 0px 12px 0px;
          display: flex;
          border-bottom: 1px solid #f3f3f3;
          .img {
            width: 40px;
            height: 40px;
            margin-right: 7px;
            img {
              width: 40px;
              height: 40px;
              border-radius: 50%;
            }
          }
          .listrigth {
            flex: 1;
            display: flex;
            justify-content: space-between;
            .left {
              display: flex;
              flex-direction: column;
              p {
                height: 22px;
                line-height: 22px;
                color: #222222;
                font-size: 14px;
              }
              .bottom {
                display: flex;
                color: #acacac;
                height: 18px;
                line-height: 18px;
                font-size: 12px;
              }
            }
            .rigth {
              height: 22px;
              line-height: 22px;
              background-color: #fdedeb;
              color: #e85345;
              font-size: 13px;
              padding: 2px 16px 2px 16px;
              margin-right: 15px;
              margin-top: 8px;
              border-radius: 64px;
            }
          }
        }
      }
    }
  }
}
</style>